<template>
  <view class="alarm-management">
    <view class="headers">

      <!-- 顶部导航 -->
      <view class="top-nav">
        <view class="nav-item" :class="{ active: activeNav === 'alarm' }" @click="switchNav('alarm')">报警管理</view>
        <view class="nav-item" :class="{ active: activeNav === 'rescue' }" @click="switchNav('rescue')">救援管理</view>
      </view>

      <!-- 状态筛选 -->
      <view class="status-tabs" v-if="activeNav === 'alarm'">
        <view class="tab-item" :class="{ active: activeTab === 'pending' }" @click="switchTab('pending')">
          待确认({{ noticeStatistics.unConfirm }})
        </view>
        <view class="tab-item" :class="{ active: activeTab === 'confirmed' }" @click="switchTab('confirmed')">
          已确认({{ noticeStatistics.confirmed }})
        </view>
        <view class="tab-item" :class="{ active: activeTab === 'all' }" @click="switchTab('all')">
          全部({{ noticeStatistics.total }})
        </view>
      </view>

      <view class="status-tabs" v-if="activeNav === 'rescue'">
        <view class="tab-item" :class="{ active: activeTab === 'pending' }" @click="switchTab('pending')">
          待调度({{ rescueStatistics.dispatching }})
        </view>
        <view class="tab-item" :class="{ active: activeTab === 'confirmed' }" @click="switchTab('confirmed')">
          待跟踪({{ rescueStatistics.dispatched }})
        </view>
        <view class="tab-item" :class="{ active: activeTab === 'all' }" @click="switchTab('all')">
          全部({{ rescueStatistics.total }})
        </view>
      </view>

      <!-- 搜索和筛选 -->
      <view class="search-section">
        <view class="search-box ">
          <searchBar ref="searchBar" style="width: 100%;" placeholder="请输入项目/电梯关键词" @confirm="searchConfirm">
          </searchBar>
        </view>

        <view class="filter-buttons">
          <view class="filter-btn act" @click="showSortModal">
            <image v-if="sort == 0" class="filter-icon" src="/static/images/rescue/desc.png" />
            <image v-else class="filter-icon" src="/static/images/rescue/asc.png" />
            <text>排序</text>
          </view>
          <view :class="['filter-btn', hasFilter ? 'act' : '']" @click="showFilterModal">
            <image v-if="hasFilter" class="filter-icon" src="/static/images/rescue/filter_act.png" />
            <image v-else class="filter-icon" src="/static/images/filter.png" />
            <text>筛选</text>
          </view>
        </view>
      </view>

    </view>

    <!-- 报警列表 -->
    <view class="alarm-list" scroll-y="true">
      <view class="none-list" v-if="alarmList.length == 0">
        <image
          src="https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/592800/1Vy2FsPEZ5NNe3c51e39abfd3bbf1979dbf98f90936e.png">

        </image>
        <view>
          <text v-if="activeNav == 'alarm'">未查询到报警数据</text>
          <text v-if="activeNav == 'rescue'">未查询到救援任务</text>
        </view>
      </view>
      <view class="alarm-item" v-for="(item, index) in alarmList" :key="index" @click="toDetail(item)">
        <!-- 位置信息 -->
        <view class="location-info">
          <view class="location-header">
            <image class="building-icon" src="/static/images/index/build.svg" />
            <text class="location-name" @click.stop="shoAlias(item)">{{ item.buildingName || '未关联' }}</text>
            <image class="dropdown-icon" @click.stop="shoAlias(item)" src="/static/images/down.png"
              v-if="item.buildingId" />
            <view class="distance">
              <image class="location-icon" src="/static/images/index/loacl.svg" />
              <text>{{ item.distance || '-' }}km</text>
            </view>
          </view>
          <view class="location-address">{{ item.address || item.buildingAddress || '' }}</view>
        </view>

        <view class="content-info">
          <!-- 倒计时信息 -->
          <view class="countdown-info" v-if="item.timeStatus == 0 && activeNav == 'rescue'">
            <image v-if="item.status != 1" class="clock-icon" src="/static/images/timeline.png" />
            <text v-if="item.status != 1" class="countdown-text">{{ item.countdown }}({{ item.arrivalDeadline }})</text>
            <text class="status-text" v-if="item.arrivalWarningDesc">{{ item.arrivalWarningDesc }}</text>
          </view>

          <view class="countdown-info" v-if="item.timeStatus == 1 && activeNav == 'rescue'">
            <image v-if="item.status != 1" class="clock-icon error" src="/static/images/timeline-err.png" />
            <text v-if="item.status != 1" class="countdown-text error">{{ item.countdown }}</text>
            <text class="status-text err-text" v-if="item.arrivalWarningDesc">{{ item.arrivalWarningDesc }}</text>
          </view>

          <view class="countdown-info" v-if="activeNav == 'alarm' && item.isConfirmTimeOut">
            <text class="status-text">确认超时</text>
          </view>
          <!-- 建筑信息 -->
          <view class="building-info">{{ item.elevatorAddress || '未知电梯位置' }}</view>

          <!-- 报警详情 -->
          <view class="alarm-details">
            <view class="detail-row" v-if="activeNav === 'alarm'">
              <text class="detail-label">报警名称</text>
              <text class="detail-value">{{ item.eventName || '-' }}</text>
            </view>

            <view class="detail-row" v-if="activeNav === 'alarm'">
              <text class="detail-label">报警来源</text>
              <text class="detail-value">{{ item.eventCodeDesc || '-' }}</text>
            </view>
            <view class="detail-row" v-if="activeNav === 'rescue' && item.status == 1">
              <text class="detail-label">报警名称</text>
              <text class="detail-value">{{ item.alarmName }}</text>
            </view>
            <view class="detail-row" v-if="activeNav === 'rescue' && item.status == 1">
              <text class="detail-label">报警来源</text>
              <text class="detail-value">{{ item.trapFromValue }}</text>
            </view>
            <view class="detail-row" v-if="activeNav === 'alarm' && item.confirmType != -1">
              <text class="detail-label">确认结果</text>
              <text class="detail-value">{{ item.confirmTypeDesc || '待确认' }}</text>
            </view>
            <view class="detail-row" v-if="activeNav === 'alarm' && item.confirmType != -1">
              <text class="detail-label">确认人</text>
              <text class="detail-value">{{ item.confirmUser || '-' }}</text>
            </view>
            <view class="detail-row" v-if="activeNav === 'alarm' && item.confirmType != -1">
              <text class="detail-label">确认时间</text>
              <text class="detail-value">{{ item.confirmTime || '-' }}</text>
            </view>
            <view class="detail-row" v-if="activeNav === 'rescue' && item.status == 1">
              <text class="detail-label">报警人</text>
              <view class="detail-value"><text class="user-text"
                  @click.stop="callPhoneNumber(item.phone, item.alarmName)">{{ item.alarmName }}</text>
                <image v-if="item.phone" @click.stop="callPhoneNumber(item.phone, item.alarmName)" class="phone-icon"
                  src="@/static/images/phone2.png">

                </image>
              </view>
            </view>

            <view class="detail-row" v-if="activeNav === 'rescue' && item.status != 1">
              <text class="detail-label">救援人</text>
              <view class="detail-value"><text class="user-text" @click.stop="showUsers(item.users)"
                  v-for="user in item.users" :key="user.name">{{
                    user.name }}</text>
                <image class="phone-icon" @click.stop="showUsers(item.users)" src="@/static/images/phone2.png">

                </image>
              </view>
            </view>
            <view class="detail-row">
              <text class="detail-label">报警时间</text>
              <text class="detail-value">{{ item.createTime || '-' }}</text>
            </view>

            <view class="detail-row" v-if="activeNav === 'rescue' && item.status != 1">
              <text class="detail-label">状态</text>
              <view class="detail-value">
                <text class="status-tag"
                  :style="{ color: statusStyle[item.status], borderColor: statusStyle[item.status] }">
                  {{ item.statusName }}
                </text>
              </view>
            </view>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-buttons" v-if="item.confirmType == -1 && activeNav == 'alarm'">
          <view class="confirm-btn" @click.stop="confirmAlarm(item)">立即确认</view>
        </view>

        <view class="action-buttons" v-if="activeNav == 'rescue'">
          <view class="confirm-btn" @click.stop="toAddUser(item)" v-if="item.status == 1">调度人员</view>
          <view class="confirm-btn" style="margin: 0 8rpx;" @click.stop="reminder(item)"
            v-if="activeTab != 'pending' && ![5, 6].includes(item.status) && item.arrivalWarning != null && item.arrivalWarning > 0">
            催办
          </view>
          <view class="confirm-btn" @click.stop="toAddUser(item)"
            v-if="item.status != 1 && item.status != 6 && item.status != 5">增派人员
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <view class="load-more" v-if="hasMore">
        <text>加载更多...</text>
      </view>

      <!-- 已经到底了 -->
      <view class="no-more" v-if="!hasMore && alarmList.length > 0">
        <text>~ 已经到底了 ~</text>
      </view>
    </view>
    <noticeFiltFer ref="noticeFiltFer" :type="activeTab" @confirm="filterConfirm"></noticeFiltFer>
    <rescueFiler :type="activeTab" ref="rescueFiler" @confirm="filterConfirm"></rescueFiler>
    <selectDrawer title="排序" ref="selectDrawer" label-key="label" value-key="value" @confirm="sortConfirm">
    </selectDrawer>
    <userDrawer ref="userDrawer"></userDrawer>
    <aliasDrawer ref="aliasDrawer"></aliasDrawer>
    <noticeConfirm ref="noticeConfirm" @success="successFuc"></noticeConfirm>
  </view>
</template>

<script>
import { getRescues, getRescueStatistics, getNoticeStatistics, getNoticeList, getNoticeDetail } from '@/apis/rescue.js';
import { getLocalInfo } from '@/utils/global_fucs.js';
import { getDistance } from '@/utils/tools.js';
import selectDrawer from './components/select-drawer.vue';
import searchBar from './components/search-bar.vue';
import rescueFiler from './components/rescue-filter.vue';
import noticeFiltFer from './components/notice-filter.vue';
import userDrawer from './components/users-drawer.vue';
import aliasDrawer from './components/alias-drawer.vue';
import noticeConfirm from './components/notice-confirm.vue';
import { resuceReminder } from '@/apis/rescue.js';
export default {
	components: { searchBar, rescueFiler, userDrawer, aliasDrawer, selectDrawer, noticeFiltFer, noticeConfirm },
	data() {
		return {
			sort: 0,
			sortList: [{
				label: '创建时间倒序',
				value: 0
			}, {
				label: '创建时间升序',
				value: 1
			}],
			filterData: {},
			keywords: '',
			// 新增：顶部导航激活项
			activeNav: 'alarm',
			activeTab: 'pending',
			searchKeyword: '',

			hasMore: true,
			alarmList: [
			],

			current: 1,
			size: 20,
			total: 0,
			// 当前定位
			local: {},

			// 状态样式
			statusStyle: {
				1: '#0091FF',
				2: '#0091FF',
				3: '#0091FF',
				4: '#0091FF',
				5: '#0091FF',
				6: '#999',
			},
			rescueStatistics: {
				dispatched: 0,
				dispatching: 0,
				total: 0,
			},
			noticeStatistics: {
				confirmed: 0,
				total: 0,
				unConfirm: 0
			}

		};
	},
	computed: {
		hasFilter() {
			let has = false;
			for (let key in this.filterData) {
				if (this.filterData[key] && this.filterData[key].length) {
					has = true;
					break;
				}
			}
			return has;
		}
	},
	async onLoad(options) {
		if (options.type == 'rescue') {
			this.activeNav = 'rescue';
		} else {
			this.activeNav = 'alarm';
		}
		if (options.status) {
			this.activeTab = options.status;
		}
	},
	async onShow() {
		console.log(111);
		let local = {};
		try {
			local = await getLocalInfo();
		} catch (error) {
			console.log(error);
		}
		console.log(222);
		this.local = local;
		this.current = 1;
		this.hasMore = true;
		this.alarmList = [];
		console.log(local);
		this.loadAlarmList();
	},
	onReachBottom() {
		console.log('触底加载更多');
		// 触底加载更多
		this.loadMore();
	},
	methods: {

		// 救援统计
		getRescueStatistics() {
			getRescueStatistics().then(res => {
				this.rescueStatistics = res.data;
			});
		},

		// 报警统计
		getNoticeStatistics() {
			getNoticeStatistics().then(res => {
				this.noticeStatistics = res.data;
			});
		},
		reminder(row) {
			resuceReminder({ planId: row.planId }).then((res) => {
				if (res) {
					uni.showToast({
						title: '催办成功'
					});
				}
			});
		},
		toAddUser(item) {
			if (!item.buildingId) {
				uni.showToast({ title: '缺少项目id', icon: 'none' });
				return;
			}
			uni.navigateTo({
				url: '/subpages/rescue/memberSelect?planId=' + item.planId
          + '&buildingId=' + item.buildingId
          + '&elevatorId=' + (item.elevatorId || '')
          + '&buildingName=' + item.buildingName
          + '&address=' + (item.elevatorAddress || '未知位置')
			});
		},

		// 筛选
		filterConfirm(res) {
			this.filterData = res;
			this.current = 1;
			this.hasMore = true;
			this.alarmList = [];
			this.loadAlarmList();
		},
		searchConfirm(res) {
			this.keywords = res;
			this.current = 1;
			this.hasMore = true;
			this.alarmList = [];
			this.loadAlarmList();
		},
		switchNav(nav) {
			this.activeNav = nav;
			this.current = 1;
			this.hasMore = true;
			this.alarmList = [];
			this.filterData = {};
			this.loadAlarmList();
		},

		// 切换状态 
		switchTab(tab) {
			this.activeTab = tab;
			this.current = 1;
			this.hasMore = true;
			this.alarmList = [];
			this.loadAlarmList();
		},
		onSearch() {
			this.loadAlarmList();
		},
		async showSortModal() {
			// 显示排序弹窗
			console.log('显示排序');
      if(this.activeNav === 'alarm' && this.activeTab != 'pending'){
        this.sortList = [
          {
            label: '创建时间倒序',
            value: 0
          }, 
          {
            label: '创建时间升序',
            value: 1
          },
          {
            label: '确认时间倒序',
            value: 2
          },
          {
            label: '确认时间升序',
            value: 3
          },
        ]
      } else {
        this.sortList = [
          {
            label: '创建时间倒序',
            value: 0
          }, 
          {
            label: '创建时间升序',
            value: 1
          },
        ]
      }
			this.$refs.selectDrawer.open(this.sortList, this.sort);
		},
		showFilterModal() {
			// 显示筛选弹窗
			console.log('显示筛选');
			if (this.activeNav == 'rescue') {
				this.$refs.rescueFiler.open(this.filterData);
			} else {
				this.$refs.noticeFiltFer.open(this.filterData);
			}
		},
		async confirmAlarm(item) {
			uni.showLoading({
				title: '加载中',
			});
			let res = await getNoticeDetail({ rescueNoticeId: item.id });
			if (!res.data || !res.data.id) {
				uni.showToast({
					title: '查无此报警数据',
					icon: 'none'
				});
				return;
			}
			uni.hideLoading();
			this.$refs.noticeConfirm.open(res.data);
		},

		successFuc(res) {
			this.current = 1;
			this.hasMore = true;
			this.alarmList = [];
			this.loadAlarmList();
			if (res.id) {
				// for (let i = 0; i < this.alarmList.length; i++) {
				// 	if (this.alarmList[i].id == res.id) {
				// 		this.alarmList[i].confirmType = res.result;
				// 		this.alarmList[i].confirmTypeDesc = {1:'准确无误',2:'误报',3:'无法确定'}[res.result];
				// 		break;
				// 	}
				// }
			}
		},

		sortConfirm(res) {
			console.log('sortConfirm', res);
			this.sort = res.index;
			this.current = 1;
			this.hasMore = true;
			this.alarmList = [];
			this.loadAlarmList();
		},
		// 加载更多数据
		loadMore() {
			if (!this.hasMore) return;
			this.current += 1;
			this.loadAlarmList();
		},

		async loadAlarmList() {
			if (this.alarmList.length == 0) {
				uni.showLoading({ title: '加载中', mask: true });
			}
			// console.log('加载报警列表', this.activeTab, this.searchKeyword);
			if (this.activeNav == 'rescue') {
				if (this.current == 1) {
					this.getRescueStatistics();
				}
				console.log('filterData', this.filterData);
				const dispatchStatus = { pending: '0', confirmed: '1', all: '' }[this.activeTab];
				let formdata = {
					searchKey: this.keywords,
					dispatchStatus,
					current: this.current,
					size: this.size
				};
				if (this.filterData.timeVals && this.filterData.timeVals.length) {
					// 时间筛选
					formdata.createTime = this.filterData.timeVals.join(',');
				}

				if (this.filterData.alarmSource && this.filterData.alarmSource.length) {
					// 报警来源
					formdata.trapFroms = this.filterData.alarmSource.join(',');
				}

				if (this.filterData.orderStatus && this.filterData.orderStatus.length) {
					// 工单状态
					formdata.statusList = this.filterData.orderStatus.join(',');
				}

				if (this.filterData.dispatchStatus && this.filterData.dispatchStatus.length) {
					// 调度状态
					if (this.filterData.dispatchStatus.length >= 2) {
						formdata.dispatchStatus = '';
					} else {
						formdata.dispatchStatus = this.filterData.dispatchStatus[0];
					}
				}

				if (this.filterData.dispatchTimeout) {
					// 调度是否超时
					formdata.alarmLabels = this.filterData.dispatchTimeout;
				}

				if (this.filterData.warningTags && this.filterData.warningTags.length) {
					formdata.alarmLabels = this.filterData.warningTags.join(',');
				}

				// 排序
				if (this.sort == 1) {
					formdata.ascs = 'create_time';
				} else {
					formdata.descs = 'create_time';
				}

				// 救援管理
				const res = await getRescues(formdata);
				const records = res.data.records || [];
				for (let i = 0; i < records.length; i++) {
					const item = records[i];
					// 如果 maximumArrivalTime 为空，则用 createTime + 30 分钟
					let arrivalTimeStr = '';
					let arrival;
					if (!item.maximumArrivalTime && item.createTime) {
						const create = new Date(item.createTime.replace(/-/g, '/')).getTime();
						arrival = create + 30 * 60 * 1000;
						// 格式化为 'yyyy-MM-dd HH:mm:ss'
						const arrivalDate = new Date(arrival);
						const pad = n => n < 10 ? '0' + n : n;
						item.maximumArrivalTime =
              arrivalDate.getFullYear() + '-' +
              pad(arrivalDate.getMonth() + 1) + '-' +
              pad(arrivalDate.getDate()) + ' ' +
              pad(arrivalDate.getHours()) + ':' +
              pad(arrivalDate.getMinutes()) + ':' +
              pad(arrivalDate.getSeconds());
					}
					arrival = item.maximumArrivalTime ? new Date(item.maximumArrivalTime.replace(/-/g, '/')).getTime() : null;
					const now = Date.now();
					let diff = arrival ? Math.round((arrival - now) / 60000) : null;
					arrivalTimeStr = item.maximumArrivalTime ? item.maximumArrivalTime.slice(11, 16) : '--:--';
					if (diff !== null) {
						if (diff >= 0) {
							item.countdown = `剩余${diff}min`;
							item.timeStatus = 0;
						} else {
							const absDiff = Math.abs(diff);
							if (absDiff >= 60) {
								const h = Math.floor(absDiff / 60);
								const m = absDiff % 60;
								item.countdown = `超时${h}h${m}min`;
							} else {
								item.countdown = `超时${absDiff}min`;
							}
							item.timeStatus = 1;
						}
						item.arrivalTime = arrivalTimeStr;
					} else {
						item.countdown = '';
						item.arrivalTime = '';
					}

					let userInfos = [];
					if (typeof item.userInfos === 'string' && item.userInfos.trim() !== '') {
						userInfos = item.userInfos.split(',').map(it => {
							const [name, phone] = it.split('-');
							return { name: name || '', phone: phone || '' };
						});
					}
					item.users = userInfos;
					// 新增：到达截止时间字段
					item.arrivalDeadline = `${arrivalTimeStr}前到达`;
					let distance = getDistance(this.local.latitude, this.local.longitude, item.latitude, item.longitude);
					if (distance) {
						item.distance = (distance / 1000).toFixed(1);
					}
					if (item.arrivalWarningDesc) {
						if (item.arrivalWarning == 3) {
							item.arrivalWarningDesc = (item.maximumType == 1 ? '超项目规定时长到达' : '超时30分钟到达');
						}

						if (item.arrivalWarning == 2) {
							item.arrivalWarningDesc = (item.maximumType == 1 ? '超项目规定时长未达' : '超时30分钟未达');
						}

						if (item.arrivalWarning == 1) {
							item.arrivalWarningDesc = (item.maximumType == 1 ? '即将超项目规定时长到达' : '即将超30分钟到达');
						}
					}
				}
				if (this.current === 1) {
					this.alarmList = records;
				} else {
					this.alarmList = this.alarmList.concat(records);
				}
				this.total = res.data.total;
				this.hasMore = this.alarmList.length < this.total;
				uni.hideLoading();
			} else {
				console.log('filterData', this.filterData);
				// 报警
				if (this.current == 1) {
					this.getNoticeStatistics();
				}
				let formdata = {
					searchKey: this.keywords,
					current: this.current,
					size: this.size
				};
				if (this.activeTab === 'pending') {
					formdata.isConfirm = false;
				}
				if (this.activeTab === 'confirmed') {
					formdata.isConfirm = true;
				}

				if (this.filterData.timeVals && this.filterData.timeVals.length) {
					// 时间筛选
					formdata.createTime = this.filterData.timeVals[0];
					formdata.endTime = this.filterData.timeVals[1];
				}

				if (this.filterData.alarmSource || this.filterData.alarmSource === '0') {
					// 报警来源
					formdata.sourceList = [this.filterData.alarmSource];
				}

				if (this.filterData.dispatchStatus) {
					// 报警来源
					formdata.isRelation = this.filterData.dispatchStatus == 1 ? true : false;
				}

				if (this.filterData.falseAlarm && this.filterData.falseAlarm.length) {
					// 误报确认 
					formdata.confirmTypeList = this.filterData.falseAlarm;
				}
				if (this.filterData.orderStatus && this.filterData.orderStatus.length) {
					// 救援状态 
					formdata.rescuePlanStatus = this.filterData.orderStatus;
				}

				if (this.filterData.repairOrderStatus && this.filterData.repairOrderStatus.length) {
					// 维修状态
					formdata.repairPlanStatus = this.filterData.repairOrderStatus;
				}

				if (this.filterData.timeoutStatus) {
					// 是否确认超时
					formdata.isConfirmTimeOut = this.filterData.timeoutStatus == 1 ? true : false;
				}

				// 排序
				if (this.sort == 1) {
					formdata.ascs = 'create_time';
				} 
        if(this.sort == 0) {
					formdata.descs = 'create_time';
				}
        if(this.sort == 2) {
					formdata.descs = 'confirm_time';
				}
        if (this.sort == 3) {
					formdata.ascs = 'confirm_time';
				} 

				const res = await getNoticeList(formdata);
				const records = res.data.records || [];
				if (this.current === 1) {
					this.alarmList = records;
				} else {
					this.alarmList = this.alarmList.concat(records);
				}
				for (let i = 0; i < records.length; i++) {
					let item = records[i];
					let distance = getDistance(this.local.latitude, this.local.longitude, item.latitude, item.longitude);
					if (distance) {
						item.distance = (distance / 1000).toFixed(1);
					}
				}
				this.total = res.data.total;
				this.hasMore = this.alarmList.length < this.total;
				uni.hideLoading();
			}
		},

		// 查看详情
		toDetail(item) {
			if (this.activeNav === 'rescue') {
				uni.navigateTo({
					url: '/subpages/rescue/rescueDetail?planId=' + item.planId + '&elevatorId=' + item.elevatorId + '&buildingId=' + item.buildingId,
				});
			} else {
				uni.navigateTo({
					url: '/subpages/rescue/noticeDetail?id=' + item.id
				});
			}
		},

		showUsers(users) {
			this.$refs.userDrawer.open(users);
		},
		shoAlias(item) {
			this.$refs.aliasDrawer.open(item);
		},
		callPhoneNumber(phone, name) {
			if (phone) {
				uni.showModal({
					title: name ? ('呼叫' + name) : '拨打电话',
					content: phone,
					success: (res) => {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: phone
							});
						}
					},
				});
			} else {
				uni.showToast({
					title: '无效的电话号码',
					icon: 'none'
				});
			}
		},
	}
};
</script>

<style lang="scss" scoped>
.alarm-management {
  background-color: #F3F6F8;
  min-height: 100vh;

  .headers {
    background-color: #fff;
    position: sticky;
    top: 0px;
    z-index: 99;
  }

  .top-nav {
    display: flex;
    background-color: #fff;
    padding: 0 24rpx;

    .nav-item {
      flex: 1;
      text-align: center;
      padding: 24rpx 0;
      font-size: 30rpx;
      color: #93B1C7;
      position: relative;
      transition: .3s all;

      &::after {
        content: '';
        position: absolute;
        transition: .3s all;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 10rpx;
        height: 4rpx;
        background-color: #fff;
        border-radius: 2rpx;
      }

      &.active {
        color: #0091FF;
        font-weight: bold;

        &::after {
          content: '';
          position: absolute;
          transition: .3s all;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 60rpx;
          height: 4rpx;
          background-color: #0091FF;
          border-radius: 2rpx;
        }
      }
    }
  }

  .status-tabs {
    display: flex;
    background-color: #fff;
    padding: 20rpx 20rpx;
    gap: 16rpx;
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;

    .tab-item {
      padding: 8rpx 20rpx;
      border-radius: 2rem;
      font-size: 26rpx;
      color: #666;
      background-color: #F3F6F8;
      transition: .3s all;

      &.active {
        background-color: #DCF0FF;
        color: #0091FF;
      }
    }
  }

  .search-section {
    display: flex;
    align-items: center;
    // padding: 24rpx 32rpx;
    background-color: #fff;
    justify-content: space-between;

    .search-box {
      flex: 1;
      display: flex;
      align-items: center;

    }

    .filter-buttons {
      display: flex;

      .filter-btn {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #333;
        padding-right: 20rpx;

        .filter-icon {
          width: 28rpx;
          height: 28rpx;
          margin-right: 6rpx;
        }
      }

      .act {
        color: #0091FF;
      }
    }
  }

  .alarm-list {
    padding: 0 20rpx;

    .none-list {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-style: 26rpx;
      color: #999;
      padding: 32rpx 0;
      margin-top: 20%;

      image {
        width: 84rpx;
        height: 84rpx;
        margin-bottom: 20rpx;
      }
    }

    .alarm-item {
      background-color: #fff;
      border-radius: 16rpx;
      margin-top: 20rpx;

      .location-info {
        padding: 20rpx;
        border-bottom: 1px solid #eee;

        .location-header {
          display: flex;
          align-items: center;

          .building-icon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 8rpx;
          }

          .location-name {
            font-size: 26rpx;
            font-weight: bold;
            color: #333;
            max-width: 70%;
          }

          .dropdown-icon {
            width: 32rpx;
            padding: 2rpx 10rpx;
            height: 32rpx;
          }

          .distance {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #666;
            margin-left: auto;

            .location-icon {
              width: 28rpx;
              height: 24rpx;
            }
          }
        }

        .location-address {
          font-size: 24rpx;
          color: #999;
          //保留一行 超出省略
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }

      .content-info {
        padding: 10rpx 20rpx;
      }

      .countdown-info {
        display: flex;
        align-items: center;

        .clock-icon {
          width: 22rpx;
          height: 22rpx;
          margin-right: 6rpx;
        }

        .error-icon {}

        .countdown-text {
          font-size: 24rpx;
          color: #FA6400;
          margin-right: 8rpx;

        }

        .status-text {
          font-size: 24rpx;
          color: #FA6400;
          padding: 4rpx 8rpx;
          background-color: #FFEFE3;
          border-radius: 8rpx;
        }

        .err-text {
          background-color: #FFE3E3;
          color: #E02020;
        }

        .error {
          color: #E02020;
        }
      }

      .building-info {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin: 16rpx 0;
      }

      .alarm-details {
        .detail-row {
          display: flex;
          flex-direction: column;
          margin-bottom: 16rpx;

          .detail-label {
            font-size: 26rpx;
            color: #999;
            margin-bottom: 8rpx;
          }

          .detail-value {
            font-size: 28rpx;
            color: #333;

            .status-tag {
              border: 1px solid #E02020;
              padding: 0px 4px;
              color: #E02020;
              border-radius: 2px;
            }

            .user-text {
              color: #0091FF;
            }

            .user-text:not(:last-of-type)::after {
              content: '、';
            }

            .user-text:last-of-type::after {
              content: '';
            }

            .phone-icon {
              width: 34rpx;
              height: 34rpx;
              vertical-align: bottom;
            }

          }
        }
      }

      .action-buttons {
        display: flex;
        justify-content: flex-end;
        padding: 20rpx;
        border-top: 1px solid #eee;

        .confirm-btn {
          background-color: #0091FF;
          color: #fff;
          border: none;
          border-radius: 8rpx;
          padding: 8rpx 16rpx;
          font-size: 26rpx;
        }
      }
    }

    .load-more,
    .no-more {
      text-align: center;
      padding: 40rpx 0;
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style>
